<div id="right-sidebar" class="animated">
    <div class="sidebar-container">

        <ul class="nav nav-tabs navs-3">
            <li>
                <a class="nav-link active" data-toggle="tab" href="#tab-1"> 记录 </a>
            </li>
            <li>
                <a class="nav-link" data-toggle="tab" href="#tab-2"> 项目 </a>
            </li>
            <li>
                <a class="nav-link" data-toggle="tab" href="#tab-3"> <i class="fa fa-gear"></i> </a>
            </li>
        </ul>

        <div class="tab-content">


            <div id="tab-1" class="tab-pane active">

                <div class="sidebar-title">
                    <h3> <i class="fa fa-comments-o"></i> 最新记录</h3>
                    <small><i class="fa fa-tim"></i> 你有10条新消息。</small>
                </div>

                <div>

                    <div class="sidebar-message">
                        <a href="#">
                            <div class="float-left text-center">
                                <img alt="image" class="rounded-circle message-avatar" src="/static/inspinia/img/a1.jpg">

                                <div class="m-t-xs">
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                </div>
                            </div>
                            <div class="media-body">
                                人生就像钟表，可以回到起点，却已不是昨天！
                                <br>
                                <small class="text-muted">今天 4:21</small>
                            </div>
                        </a>
                    </div>
                    <div class="sidebar-message">
                        <a href="#">
                            <div class="float-left text-center">
                                <img alt="image" class="rounded-circle message-avatar" src="/static/inspinia/img/a2.jpg">
                            </div>
                            <div class="media-body">
                                人生就像一本书，出生是封面，归去是封底，内容要靠自己填。
                                <br>
                                <small class="text-muted">昨天 2:45</small>
                            </div>
                        </a>
                    </div>
                    <div class="sidebar-message">
                        <a href="#">
                            <div class="float-left text-center">
                                <img alt="image" class="rounded-circle message-avatar" src="/static/inspinia/img/a3.jpg">

                                <div class="m-t-xs">
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                </div>
                            </div>
                            <div class="media-body">
                                人生就像是一盘沙子，你永远也无法全盘抓起，但也不会一无所获。
                                <br>
                                <small class="text-muted">昨天 1:10</small>
                            </div>
                        </a>
                    </div>
                    <div class="sidebar-message">
                        <a href="#">
                            <div class="float-left text-center">
                                <img alt="image" class="rounded-circle message-avatar" src="/static/inspinia/img/a4.jpg">
                            </div>

                            <div class="media-body">
                                人生就像候车月台，有人上车，也有人下车，来来往往，你谁也抓不住！
                                <br>
                                <small class="text-muted">星期一 8:37</small>
                            </div>
                        </a>
                    </div>
                    <div class="sidebar-message">
                        <a href="#">
                            <div class="float-left text-center">
                                <img alt="image" class="rounded-circle message-avatar" src="/static/inspinia/img/a8.jpg">
                            </div>
                            <div class="media-body">
                                人生就像卫生纸，没事的时候尽量少扯！
                                <br>
                                <small class="text-muted">今天 4:21</small>
                            </div>
                        </a>
                    </div>
                    <div class="sidebar-message">
                        <a href="#">
                            <div class="float-left text-center">
                                <img alt="image" class="rounded-circle message-avatar" src="/static/inspinia/img/a7.jpg">
                            </div>
                            <div class="media-body">
                                人生就像一只钟摆，永远在渴望的痛苦和满足的厌倦之间摆动！
                                <br>
                                <small class="text-muted">昨天 2:45</small>
                            </div>
                        </a>
                    </div>
                    <div class="sidebar-message">
                        <a href="#">
                            <div class="float-left text-center">
                                <img alt="image" class="rounded-circle message-avatar" src="/static/inspinia/img/a3.jpg">

                                <div class="m-t-xs">
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                </div>
                            </div>
                            <div class="media-body">
                                人生就像是一片海洋，里面的许多的奥秘要让我们去探究。
                                <br>
                                <small class="text-muted">昨天 1:10</small>
                            </div>
                        </a>
                    </div>
                    <div class="sidebar-message">
                        <a href="#">
                            <div class="float-left text-center">
                                <img alt="image" class="rounded-circle message-avatar" src="/static/inspinia/img/a4.jpg">
                            </div>
                            <div class="media-body">
                                人生就像一个空荡荡的巨大的坑，我们把时间丢进去，丢完了就完了！
                                <br>
                                <small class="text-muted">星期一 8:37</small>
                            </div>
                        </a>
                    </div>
                </div>

            </div>

            <div id="tab-2" class="tab-pane">

                <div class="sidebar-title">
                    <h3> <i class="fa fa-cube"></i> 最新项目</h3>
                    <small><i class="fa fa-tim"></i> 你有14个项目。 10没有完成</small>
                </div>

                <ul class="sidebar-list">
                    <li>
                        <a href="#">
                            <div class="small float-right m-t-xs">9小时前</div>
                            <h4>新时尚</h4>
                            人生如一杯茶，不会苦一辈子，但要苦一阵子。
                            <div class="small">完成度: 22%</div>
                            <div class="progress progress-mini">
                                <div style="width: 22%;" class="progress-bar progress-bar-warning"></div>
                            </div>
                            <div class="small text-muted m-t-xs">时间: 2017.12.12 4:00</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="small float-right m-t-xs">9小时前</div>
                            <h4>新游戏 </h4>
                            人生如一杯茶，不会苦一辈子，但要苦一阵子。
                            <div class="small">完成度: 48%</div>
                            <div class="progress progress-mini">
                                <div style="width: 48%;" class="progress-bar"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="small float-right m-t-xs">9小时前</div>
                            <h4>新房产</h4>
                            人生如一杯茶，不会苦一辈子，但要苦一阵子。
                            <div class="small">完成度: 14%</div>
                            <div class="progress progress-mini">
                                <div style="width: 14%;" class="progress-bar progress-bar-info"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="label label-primary float-right">NEW</span>
                            <h4>新世界</h4>
                            人生如一杯茶，不会苦一辈子，但要苦一阵子。
                            <div class="small">完成度: 22%</div>
                            <div class="small text-muted m-t-xs">时间: 2017.12.12 4:00</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="small float-right m-t-xs">9小时前</div>
                            <h4>新密码</h4>
                            人生如一杯茶，不会苦一辈子，但要苦一阵子。
                            <div class="small">完成度: 22%</div>
                            <div class="progress progress-mini">
                                <div style="width: 22%;" class="progress-bar progress-bar-warning"></div>
                            </div>
                            <div class="small text-muted m-t-xs">时间: 2017.12.12 4:00</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="small float-right m-t-xs">9小时前</div>
                            <h4>新数据 </h4>
                            人生如一杯茶，不会苦一辈子，但要苦一阵子。
                            <div class="small">完成度: 48%</div>
                            <div class="progress progress-mini">
                                <div style="width: 48%;" class="progress-bar"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="small float-right m-t-xs">9小时前</div>
                            <h4>新会议</h4>
                            人生如一杯茶，不会苦一辈子，但要苦一阵子。
                            <div class="small">完成度: 14%</div>
                            <div class="progress progress-mini">
                                <div style="width: 14%;" class="progress-bar progress-bar-info"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="label label-primary float-right">NEW</span>
                            <h4>新业务</h4>
                            <!--<div class="small float-right m-t-xs">9小时前</div>-->
                            人生如一杯茶，不会苦一辈子，但要苦一阵子。
                            <div class="small">完成度: 22%</div>
                            <div class="small text-muted m-t-xs">时间: 2017.12.12 4:00</div>
                        </a>
                    </li>

                </ul>

            </div>

            <div id="tab-3" class="tab-pane">

                <div class="sidebar-title">
                    <h3><i class="fa fa-gears"></i> 设置</h3>
                    <small><i class="fa fa-tim"></i> 你有13个项目，10个没有完成</small>
                </div>

                <div class="setings-item">
                            <span>
                                显示通知
                            </span>
                    <div class="switch">
                        <div class="onoffswitch">
                            <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example">
                            <label class="onoffswitch-label" for="example">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="setings-item">
                            <span>
                                即时聊天
                            </span>
                    <div class="switch">
                        <div class="onoffswitch">
                            <input type="checkbox" name="collapsemenu" checked class="onoffswitch-checkbox" id="example2">
                            <label class="onoffswitch-label" for="example2">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="setings-item">
                            <span>
                                历史记录
                            </span>
                    <div class="switch">
                        <div class="onoffswitch">
                            <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example3">
                            <label class="onoffswitch-label" for="example3">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="setings-item">
                            <span>
                                显示图表
                            </span>
                    <div class="switch">
                        <div class="onoffswitch">
                            <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example4">
                            <label class="onoffswitch-label" for="example4">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="setings-item">
                            <span>
                                离线用户
                            </span>
                    <div class="switch">
                        <div class="onoffswitch">
                            <input type="checkbox" checked name="collapsemenu" class="onoffswitch-checkbox" id="example5">
                            <label class="onoffswitch-label" for="example5">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="setings-item">
                            <span>
                                网站搜索
                            </span>
                    <div class="switch">
                        <div class="onoffswitch">
                            <input type="checkbox" checked name="collapsemenu" class="onoffswitch-checkbox" id="example6">
                            <label class="onoffswitch-label" for="example6">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="setings-item">
                            <span>
                                每天更新
                            </span>
                    <div class="switch">
                        <div class="onoffswitch">
                            <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="example7">
                            <label class="onoffswitch-label" for="example7">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="sidebar-content">
                    <h4>设置</h4>
                    <div class="small">
                        设置描述设置描述设置描述设置描述设置描述设置描述设置描述设置描述设置描述设置描述设置描述设置描述设置描述
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>